<template>
  <div class="padding-24">
    <a-card
      :bordered="false"
      style="height: 100%"
      :bodyStyle="{
        paddingTop: '14px',
        paddingBottom: 0,
      }"
    >
      <a-tabs v-model:activeKey="activeKey" @change="tabChange">
        <a-tab-pane :key="item.key" :tab="item.label" v-for="item in compList" />
      </a-tabs>
      <component :is="currentComponent" />
    </a-card>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { Configuration, AbnormalOperation, FrequentOpening, LongTermStay, Minor, NoCheckIn, StayMore, FrequentRoomChanges } from './index';
  export default defineComponent({
    name: 'DocumentTableDemo',
    components: {
      Configuration,
      AbnormalOperation,
      FrequentOpening,
      LongTermStay,
      Minor,
      NoCheckIn,
      StayMore,
      FrequentRoomChanges,
    },
    setup() {
      //当前选中key
      const activeKey = ref('NoCheckIn');
      //组件集合
      const compList = ref([
        { key: 'NoCheckIn', label: '长期无入住预警' },
        { key: 'AbnormalOperation', label: '非正常经营房源预警' },
        { key: 'FrequentOpening', label: '频繁开门预警' },
        { key: 'LongTermStay', label: '长期入住未退房预警' },
        { key: 'Minor', label: '未成年人预警' },
        { key: 'StayMore', label: '一证多住预警' },
        { key: 'FrequentRoomChanges', label: '频繁换房预警' },
        { key: 'Configuration', label: '预警配置' },
      ]);
      //当前选中组件
      const currentComponent = computed(() => {
        return activeKey.value;
      });

      //使用component动态切换tab
      function tabChange(key) {
        activeKey.value = key;
      }
      return {
        activeKey,
        currentComponent,
        tabChange,
        compList,
      };
    },
  });
</script>
